<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<body>
    <div id="app">
       <h1>原始变量的值{{msg}}</h1>
       <h1>计算属性{{message}}</h1>

       <h1><input type="text" v-model="to"></h1>
       <h1>驼峰:{{tosMessage}}</h1>

       <h1><input type="text" v-model="miao"></h1>
       <h1>时间:{{miaoMessage}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello word!',
                to: '',
                miao: Date.now()
            },
            computed: {
                message() {
                    return this.msg.split('').reverse().join('');
                },
                tosMessage() {
                    return this.to.charAt(0).toUpperCase()+ this.to.slice(0);
                },
                miaoMessage() {
                    var date = new Date(this.miao);
                    return date.toISOString().slice(0, 10);
                }
            }
        })
    </script>
</body>
</html>
